<template>
  <div id="main_footer" :style="{'--horizontal-padding': horizontalPadding}">
    <h4>{{ title }}</h4>
    <transition name="fade">
      <p v-if="hitokoto !== null && hitokoto !== ''">{{ hitokoto }}</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "MainFooter",
  props: {
    horizontalPadding: {
      type: String,
      default: "64px"
    },
    title: {
      type: String,
      default: "Lalilu"
    }
  },
  data() {
    return {
      hitokoto: null
    }
  },
  created() {
    this.getHitokoto()
  },
  methods: {
    getHitokoto() {
      fetch("https://international.v1.hitokoto.cn?c=a&encode=json")
          .then((data) => data.json())
          .then((response) => this.hitokoto = (response.hitokoto + "   —— 《" + response.from + "》"))
          .catch((error) => console.log(error))
    }
  }
}
</script>

<style scoped>
#main_footer {
  --horizontal-padding: 64px;

  min-height: 200px;
  padding: 64px var(--horizontal-padding);
  background-color: #F4F4F4;

  display: flex;
  flex-direction: column;
}

#main_footer h4 {
  margin: 0;

  font-family: "OFL Sorts Mill Goudy TT", serif;
  letter-spacing: 2px;
  font-size: 36px;
}

#main_footer p {
  margin-top: 10px;

  font-size: small;
  font-family: 霞鹜文楷, serif;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>